<template>
    <div class="contain">
      <el-card>
        <el-row class="btn-wrap" style="min-width:800px;line-height:30px;">
  
          <el-col :span="6">
            <span class="el-row-col_span">主标题:</span>
            <el-tooltip content="分类">
             <el-input v-model="params.maintitle" size="small"></el-input>
            </el-tooltip>
          </el-col>
          <el-col :span="6" >
            <span class="el-row-col_span">副标题:</span>
            <el-tooltip content="分类">
              <el-input v-model="params.subtitle" size="small"></el-input>
  
            </el-tooltip>
          </el-col>
         
          <el-col :span="12">
            <span class="el-row-col_span">创建时间:</span>
            <el-tooltip content="创建时间">
              <el-date-picker v-model="params.createTime" type="daterange" range-separator="至" start-placeholder="开始日期"
                end-placeholder="结束日期" size="small">
              </el-date-picker>
            </el-tooltip>
          </el-col>
        </el-row>
        <el-row>
          <el-col style="text-align: right;margin-right:20px;">
            <span class="seach-btn">
              <el-button class="base-btn" icon="el-icon-search" type="primary" @click="getNewsList(true)">查询
              </el-button>
              <el-button class="base-btn" icon="el-icon-refresh" type="primary" @click="reset">重置</el-button>
            </span>
          </el-col>
        </el-row>
        
      </el-card>
      <el-card>
        <el-row>
          <el-col>
            <el-button type="primary" @click="dialogFormShow(false); ">新增预告</el-button>
          </el-col>
        </el-row>
        <el-table ref="table" :data="dataList" :header-cell-style="{background:'#f2f4f6'}" style="width: 100%;"
          v-loading="loading" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading"
          :default-sort="{prop: 'createTime', order: 'descending'}">
  
          <el-table-column label="序号" type="index"  width="50"></el-table-column>
          <el-table-column label="主标题" prop="maintitle"  ></el-table-column>
          <el-table-column label="副标题" prop="subtitle"  ></el-table-column>
          <el-table-column label="内容" prop="maintext" width="120" show-overflow-tooltip></el-table-column>
          
          <el-table-column label="创建时间" prop="createTime" >
            <template slot-scope="scope">
              {{scope.row.createTime | dateformat}}
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center">
            <template slot-scope="scope">
              <p>
                <el-button type="text" title="编辑" @click="dialogFormShow(true,scope.row)">编辑</el-button>
              </p>
              <p>
                <el-button type="text" title="删除" @click="deleteNewsInfo(scope.row)">删除</el-button>
              </p>
            </template>
          </el-table-column>
        </el-table>
  
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
          :current-page="params.pageNum" :page-sizes="[10, 20, 50, 100]" :page-size="params.pageSize" background
          layout="total, sizes, prev, pager, next, jumper" :total="totals">
          </el-pagination>

      </el-card>
  
    </div>
</template>
  
  <script>
  
    export default {
      data() {
        return {
          params: {
            pageNum: 1,
            pageSize: 10,
            maintitle: "",
            subtitle: '',
            createTime:''
          },
          childClassNameList:[],
          childClassNameList2:[],
          dialogTableVisible: false,
          dialogFormVisible: false,
          form: {
            id: 1, 
            createTime: '', 
            className: '', 
            classNameID: '', 
            childClassName: '', 
            childClassNameID: '', 
            hostName: '', 
            hosthead: '', 
            labelName: '', 
            liveLink: '', 
            imgBase: '', 
            liveContent: '', 
            liveSource: '', 
            liveStartTime:"2020-07-17 13:00:00",
            liveEndTime:"2020-07-17 17:00:00",
            OPID: '1', 
            OPName: 'admin', 
            isShow: true, 
            hits: '', 
            isPriority: '', 
            priority: 0, 
            isBanner: false
          },
          rules: {
            className: [
              { required: true, message: '请选择分类', trigger: 'change' }
            ],
            hostName: [
              { required: true, message: '请填写主播', trigger: 'blur' }
            ],
            //   labelName: [
            //     { required: true, message: '请选择标签', trigger: 'change' }
            // ],
            liveLink: [
              { required: true, message: '请填写直播链接', trigger: 'blur' }
            ],
            liveSource: [
              { required: true, message: '请选择直播平台', trigger: 'change' }
            ],
            imgBase: [
              { required: true, message: '请选择图片', trigger: 'change' }
            ],
            hosthead: [
              { required: true, message: '请选择图片', trigger: 'change' }
            ]
          },
          formLabelWidth: '120px',
          dataList: [],
          editType: '新增数据',
          isEdit: false,
          totalPages: 0,
          totals: 0,
          loading: false,
  
          isAvailable: true,
        }
      },
      computed: {
        onRoutes() {
          //默认选中的菜单，:default-active 和 :index 一定要一致才有效果
          return this.$route.params.pathMatch.replace('/', '')
        },
      },
      created() {
      },
      mounted() {
       this.getNewsList(true)
      },
      methods: {
        
        // 获取列表
        async getNewsList(isBtn) {
  
          if (isBtn) {
            this.params.pageNum = 1;
          }
  
          //创建时间
          if (this.params.createTime && this.params.createTime.length > 0) {
            this.params.startDate = this.params.createTime[0]
            this.params.endDate = this.params.createTime[1]
          }
    
          this.loading = true
  
          let res = await this.$axios.post(this.API.news.getNewsList,this.params);
          if (res.data.code == "0") {
              this.dataList = res.data.data[0];
  
              let totals = res.data.data[1];
              this.totals = totals[0].total;
  
              this.totalPages = ((this.totals + this.pageSize - 1) / this.pageSize).toFixed(0);
  
              this.$message.success("查询成功");
  
              this.loading = false
            }
          
        },
        // 分页方法
        handleCurrentChange(val) {
          this.params.pageNum = val
          this.getNewsList()
        },
        handleSizeChange(val) {
          this.params.pageNum = 1
          this.params.pageSize = val
          this.getNewsList()
        },
        //查看详情
        checkExpress(row) {
          // this.$router.push({ path: "/checkExpress", query: { orderId: row.orderId } })
        },
  
        //弹出编辑框
        dialogFormShow(isEdit, row) {
          // this.$router.push({
          //     path: 'news'
          // });
          if(isEdit){
            this.$router.push({ path: "news", query: { isEdit: isEdit,id:row.id } })
          }
          else{
            
            this.$router.push({ path: "news", query: { isEdit: isEdit,id:0 } })
          }
        },
        //删除信息
        async deleteNewsInfo(row) {
          this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(async () => {
  
            let res = await this.$axios.post(this.API.news.deleteNews, { id: row.id });
  
            if (res.data.code == 0) {
                this.getNewsList();
  
                this.$message({
                  type: 'success',
                  message: '删除成功!'
                });
              }
  
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消删除'
            });
          });
  
        }
        ,
        resetForm(formName) {
          this.$refs[formName].resetFields();
        },
  
        //重置
        reset() {
          this.params = {
            pageNum: 1,
            pageSize: 10,
            maintitle: "",
            subtitle: '',
          }
        },
  
      }
    }
  </script>
  
  <style lang="less" scoped>
   .el-card{
     margin:20px 0;
   }
   .el-row-col_span{
    width:57px;
    display: inline-block;
    text-align: right;
    margin-right: 10px ;
   }
  </style>